<template>
  <div class="staff">
    <el-breadcrumb>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>员工账号权限管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form>
      <el-form-item>
        <div class="staff-content">
          <el-tabs v-model="activeName">
            <el-tab-pane label="员工账号"
              name="first"
              v-if="isHas('staffdetail','first')">
              <StaffAccount />
            </el-tab-pane>
            <el-tab-pane label="部门设置"
              name="second"
               v-if="isHas('deptstaffalldept','second')"
              >
              <DepartmentSetting />
            </el-tab-pane>
            <el-tab-pane label="角色权限管理"
              name="third"
              v-if="isHas('rolelist','third')">
              <PermissionsSetting v-if="activeName == 'third'" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
const StaffAccount = () => import("@/components/setting/staff/StaffAccount");
const DepartmentSetting = () =>
  import("@/components/setting/staff/DepartmentSetting");
const PermissionsSetting = () =>
  import("@/components/setting/staff/PermissionsSetting");
const AddPopover = () => import("@/components/common/AddPopover");
const Breadcrumb = () => import("@/components/common/Breadcrumb");
import { has } from "@/public/js/util";
export default {
  name: "Staff",
  token: "",
  data() {
    return {
      activeName: "first",
      information: {},
      content: {
        firstTitle: "设置",
        secondTitle: "部门与员工",
        type: "close"
      },
      isFirst: true
    };
  },
  created() {},
  methods: {
    isHas(role, tab) {
      if (this.isFirst) {
        if (has(role, this)) {
          this.activeName = tab;
          this.isFirst = false;
        }
      }
      return has(role, this);
    }
  },
  components: {
    StaffAccount,
    DepartmentSetting,
    PermissionsSetting,
    AddPopover,
    Breadcrumb
  }
};
</script>
<style lang="scss">
.staff-content {
  margin-top: 20px;
  background-color: white;
  padding: 20px 30px;
  position: relative;
  .permissions-setting {
    .information-btn {
      margin-left: -30px;
      box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
    }
  }
}
.expand-trigger div {
  height: 50px !important;
}
.increase {
  position: absolute;
  top: 0;
  left: 0;
  width: 96.5%;
  background: white;
  z-index: 3;
  padding: 20px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  h1 {
    text-align: left;
    margin-bottom: 10px;
  }
  .el-form-item {
    .el-form-item__content {
      text-align: left;
      .el-input {
        width: 300px;
      }
      .el-button {
        width: 82px !important;
        height: 34px !important;
        padding: 0 !important;
      }
    }
  }
}
</style>
